﻿div[data-type="chronometer"] {
 padding: 4px;
 overflow: hidden !important;
 display: block !important;
 position: relative !important;
 width: auto;
 height: auto;
 vertical-align: middle !important;
 text-align: center !important;
 White-Space: normal !important;
}

div[data-type="chronometer"]>div {
 width: 0.60em;
 height: 1em;
 overflow: hidden !important;
 position: relative !important;
 display: inline-block !important;
 vertical-align: middle !important;
 text-align: center !important;

}

div[data-type="chronometer"][data-play="start"]>div>div {
 -webkit-animation-play-state: running !important;
 -moz-animation-play-state: running !important;
 -o-animation-play-state: running !important;
 -khtml-animation-play-state: running !important;
 -ms-animation-play-state: running !important;
 animation-play-state: running !important;
}

div[data-type="chronometer"][data-play="stop"]>div>div {
 -webkit-animation-play-state: paused !important;
 -moz-animation-play-state: paused !important;
 -o-animation-play-state: paused !important;
 -khtml-animation-play-state: paused !important;
 -ms-animation-play-state: paused !important;
 animation-play-state: paused !important;
}

div[data-type="chronometer"][data-play="reset"]>div>div {
 -webkit-animation: none !important;
 -moz-animation: none !important;
 -o-animation: none !important;
 -khtml-animation: none !important;
 -ms-animation: none !important;
 animation: none !important;
}

div[data-type="chronometer"]>div>div {
 
  width: 0.6em;
  line-height: 1em;
  font-family: digital, arial, verdana !important;
  text-align: center !important;

	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	
	/*Glow to the text*/
	text-shadow: 0 0 5px rgba(255, 255, 255, 1) !important;

}

div[data-type="chronometer"]>div>div.moveten {
	/*The digits move but dont look good. We will use steps now
	10 digits = 10 steps. You can now see the digits swapping instead of 
	moving pixel-by-pixel*/

	-webkit-animation: moveten 1s steps(10, end) infinite;
	-moz-animation: moveten 1s steps(10, end) infinite;
	-khtml-animation: moveten 1s steps(10, end) infinite;
	-o-animation: moveten 1s steps(10, end) infinite;
	-ms-animation: moveten 1s steps(10, end) infinite;
	animation: moveten 1s steps(10, end) infinite;
	
	/*By default animation should be paused*/
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	-o-animation-play-state: paused;
	-khtml-animation-play-state: paused;
	-ms-animation-play-state: paused;
	animation-play-state: paused;
}

div[data-type="chronometer"]>div>div.movesix {
	-webkit-animation: movesix 1s steps(6, end) infinite;
	-webkit-animation-play-state: paused;
	-moz-animation: movesix 1s steps(6, end) infinite;
	-moz-animation-play-state: paused;
	-o-animation: movesix 1s steps(6, end) infinite;
	-o-animation-play-state: paused;
	-khtml-animation: movesix 1s steps(6, end) infinite;
	-khtml-animation-play-state: paused;
	-ms-animation: movesix 1s steps(6, end) infinite;
	-ms-animation-play-state: paused;
	animation: movesix 1s steps(6, end) infinite;
	animation-play-state: paused;
}

/*Now we need to sync the animation speed with time speed*/
/*One second per digit. 10 digits. Hence 10s*/
div[data-type="chronometer"]>div>div.second {
 -webkit-animation-duration: 10s;
 -moz-animation-duration: 10s;
 -o-animation-duration: 10s;
 -khtml-animation-duration: 10s;
 -ms-animation-duration: 10s;
 animation-duration: 10s;
}

/*60 times .second*/
div[data-type="chronometer"]>div>div.tensecond { 
 -webkit-animation-duration: 60s;
 -moz-animation-duration: 60s;
 -khtml-animation-duration: 60s;
 -o-animation-duration: 60s;
 -ms-animation-duration: 60s;
 animation-duration: 60s;
} 

 /*1/10th of .second*/
div[data-type="chronometer"]>div>div.milisecond {
 -webkit-animation-duration: 1s;
 -moz-animation-duration: 1s;
 -khtml-animation-duration: 1s;
 -o-animation-duration: 1s;
 -ms-animation-duration: 1s;
 animation-duration: 1s;
}

div[data-type="chronometer"]>div>div.tenmilisecond {
 -webkit-animation-duration: 0.1s;
 -moz-animation-duration: 0.1s;
 -khtml-animation-duration: 0.1s;
 -o-animation-duration: 0.1s;
 -ms-animation-duration: 0.1s;
 animation-duration: 0.1s;
}

div[data-type="chronometer"]>div>div.hundredmilisecond {
 -webkit-animation-duration: 0.01s;
 -moz-animation-duration: 0.01s;
 -khtml-animation-duration: 0.01s;
 -o-animation-duration: 0.01s;
 -ms-animation-duration: 0.01s;
 animation-duration: 0.01s;
}

/*60 times .second*/
div[data-type="chronometer"]>div>div.minute {
 -webkit-animation-duration: 600s;
 -moz-animation-duration: 600s;
 -khtml-animation-duration: 600s;
 -o-animation-duration: 600s;
 -ms-animation-duration: 600s;
 animation-duration: 600s;
} 

/*60 times .minute*/
div[data-type="chronometer"]>div>div.tenminute {
 -webkit-animation-duration: 3600s;
 -moz-animation-duration: 3600s;
 -khtml-animation-duration: 3600s;
 -o-animation-duration: 3600s;
 -ms-animation-duration: 3600s;
 animation-duration: 3600s;
} 

/*60 times .minute*/
div[data-type="chronometer"]>div>div.hour {
 -webkit-animation-duration: 36000s;
 -moz-animation-duration: 36000s;
 -khtml-animation-duration: 36000s;
 -o-animation-duration: 36000s;
 -ms-animation-duration: 36000s;
 animation-duration: 36000s;
} 

/*10 times .hour*/
div[data-type="chronometer"]>div>div.tenhour {
 -webkit-animation-duration: 360000s;
 -moz-animation-duration: 360000s;
 -khtml-animation-duration: 360000s;
 -o-animation-duration: 360000s;
 -ms-animation-duration: 360000s;
 animation-duration: 360000s;
} 

@-webkit-keyframes moveten {
	0% {top: 0;}
	100% {top: -10em;} 
	/*height = 40. digits = 10. hence -400 to move it completely to the top*/
}

@-webkit-keyframes movesix {
	0% {top: 0;}
	100% {top: -6em;} 
	/*height = 40. digits = 6. hence -240 to move it completely to the top*/
}

@-moz-keyframes moveten {
	0% {top: 0;}
	100% {top: -10em;} 
	/*height = 40. digits = 10. hence -400 to move it completely to the top*/
}

@-moz-keyframes movesix {
	0% {top: 0;}
	100% {top: -6em;} 
	/*height = 40. digits = 6. hence -240 to move it completely to the top*/
}

@-khtml-keyframes moveten {
	0% {top: 0;}
	100% {top: -10em;} 
	/*height = 40. digits = 10. hence -400 to move it completely to the top*/
}

@-khtml-keyframes movesix {
	0% {top: 0;}
	100% {top: -6em;} 
	/*height = 40. digits = 6. hence -240 to move it completely to the top*/
}

@-o-keyframes moveten {
	0% {top: 0;}
	100% {top: -10em;} 
	/*height = 40. digits = 10. hence -400 to move it completely to the top*/
}

@-o-keyframes movesix {
	0% {top: 0;}
	100% {top: -6em;} 
	/*height = 40. digits = 6. hence -240 to move it completely to the top*/
}

@-ms-keyframes moveten {
	0% {top: 0;}
	100% {top: -10em;} 
	/*height = 40. digits = 10. hence -400 to move it completely to the top*/
}

@-ms-keyframes movesix {
	0% {top: 0;}
	100% {top: -6em;} 
	/*height = 40. digits = 6. hence -240 to move it completely to the top*/
}


@keyframes moveten {
	0% {top: 0;}
	100% {top: -10em;} 
	/*height = 40. digits = 10. hence -400 to move it completely to the top*/
}



@keyframes movesix {
	0% {top: 0;}
	100% {top: -6em;} 
	/*height = 40. digits = 6. hence -240 to move it completely to the top*/
}


/*Lets use a better font for the numbers*/
@font-face {
	font-family: 'digital';
	src: url('DS-DIGI.TTF');
	
}